<template>
  <div class="zdiv">
    <scale-box :width="1920" :height="1080" :delay="100">
      <!-- 你的大屏内容 -->
      <!-- <dv-full-screen-container> -->
      <div class="bsc-app">
        <bsc-header title="国投钦州港口有限公司 " />
        <div class="bas-box">
          <div class="bas-left clearfix">
            <bscqyglcard title="一流管理 " class="clearfix" />
            <bscylfwcard
              title="一流服务 "
              :chart-items="chartItems"
              class="clearfix"
            />
          </div>
          <div class="bas-content">
            <div class="content-top">
              <bsc-top-card :data="topdata" class="clearfix" />
              <div class="bbb">
                <map-fly-lines />
              </div>
            </div>
            <div class="content-bottom">
              <bsc-bottom-card title="车船实时动态" class="clearfix" />
            </div>
          </div>
          <div class="bas-right">
            <div class="cargo-section">
              <cargo-structure title="一流生产" class="clearfix" />
            </div>
            <div class="discharge-section">
              <discharge-stats
                title="卸船统计"
                :chart-items="chartItems1"
                class="clearfix"
              />
            </div>
            <div class="efficiency-section">
              <efficiency-card title="卸船效率" class="clearfix" />
            </div>
          </div>
        </div>
      </div>
      <!-- </dv-full-screen-container> -->
    </scale-box>
  </div>
</template>

<script>
import BscHeader from "./components/header.vue";
import Bscqyglcard from "./components/qyglcard.vue";
import ScaleBox from "vue2-scale-box";
import Bscylfwcard from "./components/ylfwcard.vue";
import BscBottomCard from "./components/bottom-card.vue";
import EfficiencyCard from "./components/efficiency-card.vue";
import DischargeStats from "./components/discharge-stats.vue";
import CargoStructure from "./components/cargo-structure.vue";
import BscTopCard from "./components/top-card.vue";
import MapFlyLines from "./components/map-fly-lines.vue";
export default {
  name: "Bsc",
  components: {
    BscHeader,
    ScaleBox,
    Bscqyglcard,
    Bscylfwcard,
    BscBottomCard,
    EfficiencyCard,
    DischargeStats,
    CargoStructure,
    BscTopCard,
    MapFlyLines
  },
  data() {
    return {
      topdata: [
        {
          name: "吞吐量",
          value: 645.11,
          unit: "万吨",
          color: "rgba(196, 234, 253, 0.85)",
          color1: "rgb(0, 187, 255)",
          unitcolor: "rgba(220, 243, 255, 0.5)",
        },
        {
          name: "火车调出",
          value: 215.76,
          unit: "万吨",
          color: "rgba(255, 235, 183, 0.85)",
          color1: "rgba(255, 235, 183, 0.65)",
        },
        {
          name: "汽运调入",
          value: 10.76,
          unit: "万吨",
          color: "rgba(255, 235, 183, 0.85)",
          color1: "rgba(255, 235, 183, 0.65)",
        },
        {
          name: "流程调出",
          value: 246.76,
          unit: "万吨",
          color: "rgba(255, 235, 183, 0.85)",
          color1: "rgba(255, 235, 183, 0.65)",
        },
        {
          name: "协作泊位",
          value: 21.76,
          unit: "万吨",
          color: "rgba(255, 235, 183, 0.85)",
          color1: "rgba(255, 235, 183, 0.65)",
        },
      ],
      chartItems: [
        {
          iconImage: "card-lv.png",
          title: "最高卸船效率",
          value: 78,
          tons: 2575.77,
          unit: "吨/时",
          ringColor: ["#9EE6E6", "#FECFEF"],
          // ringColor: "#ff6b6b"
        },
        {
          iconImage: "ht.png",
          title: "最高单班作业量",
          value: 95,
          tons: 40160,
          unit: "吨",
          ringColor: ["#9EE6E6", "#FECFEF"],
        },
        {
          iconImage: "card-lv.png",
          title: "最高单流程吨数",
          value: 62,
          tons: 40160,
          unit: "吨",
          ringColor: ["#FFFDE7", "#FFD54F"],
        },
        {
          iconImage: "ht.png",
          title: "最高单班装车量",
          value: 88,
          tons: 365,
          unit: "车",
          ringColor: ["#FFFDE7", "#FFD54F"],
        },
      ],
      chartItems1: [
        {
          title: "华谊能源",
          value: 78,
          tons: 257,
          unit: "万吨",
          ringColor: ["#9EE6E6", "#FECFEF"],
          // ringColor: "#ff6b6b"
        },
        {
          title: "华谊能源",
          value: 95,
          tons: 400,
          unit: "万吨",
          ringColor: ["#9EE6E6", "#FECFEF"],
        },
        {
          title: "华谊能源",
          value: 62,
          tons: 401,
          unit: "万吨",
          ringColor: ["#FFFDE7", "#FFD54F"],
        },
        {
          title: "华谊能源",
          value: 88,
          tons: 365,
          unit: "万吨",
          ringColor: ["#FFFDE7", "#FFD54F"],
        },
      ],
    };
  },
  mounted() {
    this.$message.success("mounted");
  },
  methods: {
    getData() {
      this.$message.success("getData");
    },
  },
};
</script>

<style scoped lang="scss">
.bbb{
  width: 100%;
  height: 100%;
  overflow: visible;
  position: relative;
}
.zdiv {
  width: 100vw;
  height: 100vh;
  background-color: rgb(5, 15, 35);
  .bsc-app {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    transform-origin: left top;
    overflow: visible;
    transform: scale(1);
    background: url("~@/assets/images/bsc-bj.png") left center / 100% 100%
      no-repeat;
    .bas-box {
      display: flex;
      justify-content: space-around;
      // height: calc(100vh - 70px);
      margin-top: 10px;
      height: calc(100% - 90px);

      .bas-left,
      .bas-right {
        width: 25%;
        height: 100%;
      }
      .bas-content {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .content-top {
          height: 66.67%;
          box-sizing: border-box;
          position: relative;
        }
        .content-bottom {
          height: 33.33%;
          box-sizing: border-box;
        }
      }
      .bas-right {
        .cargo-section {
          height: 25%;
          box-sizing: border-box;
        }

        .discharge-section {
          height: 25%;
          box-sizing: border-box;
        }

        .efficiency-section {
          height: 50%;
          box-sizing: border-box;
        }
      }
      div {
        // border: 1px solid red;
      }
    }
  }
}
</style>
